コレクターで画像収集

コレクター（Collectorクラス）は画像に設定されたキーワードを元に単数から複数のファイルから画像や動画を集めます。

既に存在するリストアイテムからそれが保持する素材を引っ張る別の方法として、別項目「トップ画像の指定」に出てくるoriginalListItemBaseがあります。
例えばは、ファイル名「video.html」とリストアイテムのId「動画pixabay」を元にリストアイテムを探し出し、その分身を作り、それが保持する画像や文字、ビデオなどの素材を表示するのに使います。
これはリストアイテムの分身を作らずに素材だけを収集するコレクターとは異なります。

通常、originalListItemBaseは「これを表示させたい！」というとき、つまり特定の素材を確実に表示させたいときに使用します。
一方、コレクターは複数のリストアイテムからそれらが保持する素材の中で特定のキーワードが設定されているものを手当たり次第に集めるため、コレクターで集められる素材はoriginalListItemBaseの場合と違って明白でないことが多く、集められた画像を見たときは「ああこの画像がそうか」と確認する感じになります。

collector、 ListTitle はじめに
まず、collectorクラスのDIVとListTitleクラスのDIVをつくります。

ListTitleの内部文字列、 collectorのcategories collectorリストアイテムとListTitleを引っ付ける
ListTitleの内部に文字列「コレクター　「お気に入りアルファベット」画像を収集」を加え、 collectorのcategoriesにも同じ文字列を加えます。
これによりcollectorがListTitleに引っ付きます。

ListViewOptions、 iwidth 表示方法と幅を指定する
集めた画像の全てを表示対象とするために、ListTitleに「ListViewOptions="FX"」を加えます。
また「FX」表示された素材の一つ一つの幅を100pxとして表示させるために、ListTitleに「iwidth="100"」を加えます。

showattrib_keywords、 showattrib_originalListItemBaseURL、showfilename 追加情報を表示させる
集めた素材に設定されているキーワードを表示させるために「showattrib_keywords;」を、どのファイルからその素材を引っ張ってきたのかを表示させるために「showattrib_originalListItemBaseURL;」を、素材のファイル名を表示させるために「showfilename=1;」を optionsの値としてListTitleに加えます。

showfilenameの数字はファイルパスにおいてどの深度まで表示させるかを指定するものです。
例えば、ファイルパスが「.\フォルダ1\フォルダ2\フォルダ3\ファイル.jpg」である場合に「showfilename=2;」とすれば「\フォルダ3\ファイル.jpg」と表示されます。

キーワードを指定して素材を集める

【コレクターの例A】

keywords 検索するキーワードを指定する
「keywords="お気に入りアルファベット"」としてListTitleに加え、「お気に入りアルファベット」がキーワードの一つとして設定されている素材を収集させます。

collectorurl 検索するファイルを指定する
collectorurlクラスを使ってコレクターが検索するファイルを単数から複数設定します。
ここではcollectorurl内部に「pic_alphabet.html;」を加えてファイル「pic_alphabet.html」を検索させます。

実際の表示

コレクター　「お気に入りアルファベット」画像を収集

pic_alphabet.html;

ファイル拡張子を指定して素材を集める

【コレクターの例B】

これを機能させるには、設定の「コレクター」セクションにあるオプション「リストアイテムをキーワードで収集する際にファイル拡張子からキーワードを検索する。」がオンになっている必要があります。

次の例では、特定ページを検索して、ファイルの拡張子が「.mp4」または「.webm」となっているメディアファイルを収集します。
収集後はを使ってキーワードが「お気に入り」になっているものだけを表示させています。

実際の表示

コレクター　ファイルの拡張子が.mp4または.webmとなっているメディアファイル
キーワードが「お気に入り」になっているものだけを表示

video2.html; keyword=お気に入り;

【コレクターの例C】

でimageViewerGroup属性を指定すると、ページでのアイテムの表示を絞り込む代わりにプレイリストをリスト先頭アイテムのプルダウンメニューに追加します。

実際の表示

コレクター　ファイルの拡張子が.mp4または.webmとなっているメディアファイル

video2.html; keyword=お気に入り;

【コレクターの例D】

でmaxImages属性を指定すると、表示させるアイテムの最大数を制限する事ができます
maximages=3とすると表示されるアイテムは全アイテムを代表するアイテム1 ＋アイテム3の合計4つのアイテムが表示されます。

実際の表示

コレクター　ファイルの拡張子が.jpgまたは.gifとなっているメディアファイル, maximages=3

gif_animations.html; photos.html;

【コレクターの例E】

でmaxImages属性を指定し、更にmaxImagesEach属性を付加するとそれらアイテムを所有する各ListItemBase毎に表示させるアイテムの最大数を制限する事ができます
maximages=3とすると表示されるアイテムは、全アイテムを代表するアイテムが1つ、それ以降は同じListItemBaseを親に持つ子のメディア・グループ毎に3つのアイテムが表示されます。

実際の表示

コレクター　ファイルの拡張子が.jpgまたは.gifとなっているメディアファイル, maximages=3, maximageseach

gif_animations.html; photos.html;